<template>
  <div>
    <!-- 列表 -->
    <DataTable :list="deptList" :fields="fields" v-loading="listLoading"
      :permissions="$store.state.permissions" :add="toSave" :exports="toSave"
      children="childDepts" :edit="toSave" :del="del">
    </DataTable>

    <!-- 新增&修改 表单 -->
    <Form :title="title" :visible.sync="visible" :fields.sync="fromFields" :formData="form" :submitForm="submitForm">
    </Form>

  </div>
</template>
<script>
const DataTable = () => import("@/views/Common/DataTable/haveChildren.vue");

export default {
  name: "Menu",
  components: { DataTable },
  data() {
    return {
      // 表单标题
      title: "",
      // 表单显示状态
      visible: false,
      // 提交按钮加载状态
      confirmLoading: false,
      // 图标选择器显示状态
      iconSelectorDisplay: false,
      // 列表字段
      fields: [
        {
          label: "部门名称",
          value: "deptName",
        },
        {
          label: "部门编号",
          value: "deptCode",
        },
        {
          label: "排序",
          value: "sort",
        },
      ],
      // 列表数据
      deptList: [],
      listLoading: false,
      // 表单字段
      fromFields: [
        {
          label: "父级部门",
          value: "parentDeptCode",
          type: "cascader",
          options: [],
          rules: [{ required: true, message: "父级部门不能为空!" }],
        },
        {
          label: "部门名称",
          value: "deptName",
          rules: [{ required: true, message: "部门名称不能为空!" }],
        },
        {
          label: "部门编号",
          value: "deptCode",
          rules: [{ required: true, message: "部门编号不能为空!" }],
        },
        {
          label: "排序",
          value: "sort",
          type: "number",
        },
      ],
      // 表单参数
      form: {},
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 打开 新增/修改 表单
    toSave(uuid) {
      this.form = {
        sort:0,
      };
      if (uuid) {
        this.title = "修改菜单";
        this.$api.dept.getOne(uuid).then((res) => {
          this.form = res.data;
        });
      } else {
        this.title = "新增菜单";
      }
      this.visible = true;
    },
    // 提交表单
    submitForm() {
      if (this.form.deptCode != this.form.parentDeptCode) {
        this.$api.dept.save(this.form).then((res) => {
          if (res.code == 200) {
            this.visible = false;
            this.getList();
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        });
      } else {
        this.$message.warning("父级菜单不能与当前菜单相同！");
      }
    },
    // 删除
    del(uuid) {
      this.$api.dept.del({ uuid: uuid }).then((res) => {
        if (res.code == 200) {
          this.getList();
          this.$message.success("删除成功");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 获取列表
    getList() {
      this.listLoading = true;
      this.$api.dept.getList().then((res) => {
        if (res.code == 200) {
          this.deptList = res.data;
          this.fromFields[0].options = [
            {
              value: "0",
              label: "主类目",
              children: this.buildOptions(this.deptList),
            },
          ];
        } else {
          this.$message.error(res.msg);
        }
        this.listLoading = false;
      });
    },
    // 构建联级选择数据
    buildOptions(deptList) {
      let list = [];
      deptList.forEach((e) => {
        let options = {};
        options["value"] = e.deptCode;
        options["label"] = e.deptName;
        if (e.childDepts && e.childDepts.length != 0) {
          options["children"] = this.buildOptions(e.childDepts);
        }
        list.push(options);
      });
      return list;
    },
  },
};
</script>

<style lang="less" scoped>
.headerBtn {
  margin-right: 10px;
}

.menuTitle {
  margin: 30px 0 0 0;
  text-align: center;
  border-bottom: 1px solid #ccc;
}
</style>